import React from "react";
import {
  CockpitChartBaseProps,
  echartsCockpitTheme,
  legendCommonConfig,
  lineChartGridCommonConfig,
  lineChartTooltipCommonConfig,
} from "../helps";
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";
import { createRoot } from "react-dom/client";
import CustomChartTooltip, { ToolTipFonts } from "../customChartTooltip";
import { Ds1Marker, Ds2Marker } from "./styles";

export interface AccountsPayableSettlementBarChartProps
  extends CockpitChartBaseProps {
  unitName?: string;
}
const tooltipRootDom = document.createElement("div");

const tooltipRoot = createRoot(tooltipRootDom);

export const getAccountsPayableSettlementBarChart = ({
  unitName = "",
  dataSource = [],
}: AccountsPayableSettlementBarChartProps): EChartsOption => {
  return {
    color: ["#C3AE95", "#76ACF6"],
    tooltip: {
      ...lineChartTooltipCommonConfig,
      formatter: (params: any) => {
        const [ds1 = {}, ds2 = {}] = params;
        console.log(ds1, "ds1ds1");
        tooltipRoot.render(
          <CustomChartTooltip>
            <ToolTipFonts>{ds1.name}</ToolTipFonts>

            <ToolTipFonts>
              <Ds1Marker />
              {ds1.seriesName}：{ds1.value}
              {unitName}
            </ToolTipFonts>
            <ToolTipFonts>
              <Ds2Marker />
              {ds2.seriesName}：{ds2.value}
              {unitName}
            </ToolTipFonts>
          </CustomChartTooltip>
        );
        return tooltipRootDom;
      },
    },
    legend: {
      ...legendCommonConfig,
      icon: "rect",
      itemStyle: {
        borderWidth: 1,
      },
      data: ["应收结算", "应付结算"],
    },

    grid: {
      ...lineChartGridCommonConfig,
      containLabel: true,
    },
    yAxis: [
      {
        name: "单位：" + unitName,
        type: "value",

        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#AFBFE0",
          opacity: 0.8,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#899DBF",
            opacity: 0.29,
          },
        },
      },
    ],
    xAxis: [
      {
        type: "category",
        axisLabel: {
          color: "#AFBFE0",
          opacity: 0.8,
        },

        axisLine: {
          lineStyle: {
            color: "#899DBF",
            opacity: 0.29,
            type: "solid",
          },
        },
        axisTick: {
          show: false,
        },
        data: dataSource.map((d) => d.name || ""),
      },
    ],
    series: [
      {
        barWidth: 9,
        name: "应收结算",
        type: "bar",
        label: {
          show: false,
          position: "inside",
        },

        data: dataSource.map((m) => m.receivableAmount || 0),
        itemStyle: {
          color: "rgba(195, 174, 149, 0.3)",
          borderWidth: 1,
          borderColor: "#C3AE95",
        },
      },
      {
        barWidth: 9,
        name: "应付结算",
        type: "bar",
        label: {
          show: false,
          position: "inside",
        },

        data: dataSource.map((m) => m.payableAmount || 0),
        itemStyle: {
          color: "rgba(175, 191, 224, 0.3)",
          borderWidth: 1,
          borderColor: "#76ACF6",
        },
      },
    ],
  };
};

const AccountsPayableSettlementBarChart = ({
  unitName = "",
  reactEChartsProps,
  dataSource = [],
}: AccountsPayableSettlementBarChartProps) => {
  return (
    <ReactECharts
      theme={echartsCockpitTheme}
      option={getAccountsPayableSettlementBarChart({
        unitName,
        dataSource,
      })}
      {...reactEChartsProps}
    />
  );
};

export default AccountsPayableSettlementBarChart;
